<template>
  <div style="
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;">
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          label="课程名"
          width=""
          align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column
          label="任课教师"
          width=""
          align="center">
        <template slot-scope="scope">
          {{ scope.row.teacher }}
        </template>
      </el-table-column>
      <el-table-column
          label="选课人数"
          width=""
          align="center">
        <template slot-scope="scope">
          {{ scope.row.count }}

        </template>
      </el-table-column>
      <el-table-column
          label="上课时间"
          width=""
          align="center">
        <template slot-scope="scope">
          {{ scope.row.time}}

        </template>
      </el-table-column>
      <el-table-column
          label="上课地点"
          width=""
          align="center">
        <template slot-scope="scope">
          {{ scope.row.address }}

        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑学生信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-input v-model="form.index" autocomplete="off" v-show="false"></el-input>
        <el-input v-model="form.id" autocomplete="off" v-show="false"></el-input>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="formsex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item label="年级" :label-width="formLabelWidth">
                  <el-select v-model="formGrade" placeholder="请选择年级">
                    <el-option :label = item :value=item v-for="(item, i) in gradeList"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="班级" :label-width="formLabelWidth" v-show="clazzVisible">
                  <el-select v-model="form.clazz" placeholder="请选择班级">
                    <el-option :label=item :value=item v-for="(item, i) in clazzList"></el-option>
                  </el-select>
                </el-form-item>-->
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateStudent()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "ManageCourse",
  data() {
    return {
      formLabelWidth: '213',
      dialogFormVisible: false,
      tableData: [{
      }],
      formGrade: '1',
      form: {
        index: '21',
        id: '321',
        name: '123',
        teacher: '213',
        count: '123',
        time: '213',
        address: '',
      }
    }
  },
  methods: {
    handleEdit(index, row) {
      this.form.index = index;
      this.form.id = row.id
      this.form.formGrade = row.formGrade
      this.form.num = row.num
      this.form.count = row.count
      this.form.leader = row.leader
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      //删除记录
      //var id = row.id;
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index+row);
        this.tableData.splice(index, 1);
        // deleteStudent(id).then(
        //     response => {
        //
        //       this.$message({
        //         message: response.message,
        //         type: 'success'
        //       });
        //     }
        // )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleUpdateStudent() {
      var id = this.form.id;
      var address = this.form.address;
      var time = this.form.time;
      var name = this.form.name;
      var count = this.count;
      var teacher = this.form.teacher;
      if (null === id || "" === id ||
          null === teacher || "" === teacher ||
          null === name || "" === name ||
          null === count || "" === count ||
          null === time || "" === time ||
          null === address || "" === address) {
        this.$message({
          message: "请填写完整的信息",
          type: "error"
        })
      } else {
        //请求后台
        let data = {
          id: '321',
          name: '123',
          teacher: '213',
          count: '123',
          time: '213',
          address: '',
        }
        console.log(data)
        /*updateStudent(data).then(
            //更新页面数据
            response => {
              // var i = this.form.index;
              // this.tableData[i].age = age;
              // this.tableData[i].sex = sex;
              // this.tableData[i].num = num;
              // this.tableData[i].name = name;
              // this.tableData[i].grade = grade;
              // this.tableData[i].clazz = clazz;
              // this.tableData[i].address = address;
              // this.dialogFormVisible = false;
              this.dialogFormVisible = false;
              this.loadData()
              this.$message({
                message: response.message,
                type: "success"
              })
            }
        )*/
      }
    },
    loadData() {
      console.log("132")
      /*listStudent().then(
          response => {
            this.tableData = response.data;
          }
      )*/
    },
  }
}

</script>

<style scoped>

</style>